<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">

    <link rel="stylesheet" href="../../Content/css/base/reset.css">

    <link rel="stylesheet" href="../../Content/css/base/color.css">

    <link rel="stylesheet" href="../../Content/css/base/backgroudcolor.css">

    <link rel="stylesheet" href="../../Content/css/base/border.css">

    <link rel="stylesheet" href="../../Content/css/base/fontsize.css">

    <link rel="stylesheet" href="../../Content/css/base/padding.css">

    <link rel="stylesheet" href="../../Content/css/base/margin.css">

    <link rel="stylesheet" href="../../Content/css/base/widget.css">

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }

        .fade-enter, .fade-leave-active {
            opacity: 0
        }
    </style>

</head>
<body>
<link href="https://cdn.jsdelivr.net/npm/animate.css" rel="stylesheet" type="text/css">

<script type="text/x-template" id="scWidgetTpl">
    <div class="widget">
        <div class="widget-header bg-sc-danger foreIcon">
            <i class="fa fa-arrow-down widget-icon "></i>
            <span class="widget-caption">{{ title }}</span>

            <div class="widget-buttons">
                <a href="#" data-toggle="maximize"> <i class="fa fa-expand "></i></a>
                <a href="#" data-toggle="collapse" v-on:click="togglerBodyShow"><i class="fa fa-minus"></i></a>
                <a href="#" data-toggle="dispose" v-on:click="remove"><i class="fa  fa-times"></i></a>
            </div>
        </div>
        <transition name="fade">
            <div class="widget-body" v-show="collapsed">
                <slot>

                </slot>
            </div>
        </transition>
    </div>

</script>

<script type="text/x-template" id="scWidgetTpl2">
    <div class="widget" v-bind:class="{collapsed:collapsed}" v-if="show">
        <div class="widget-header bg-sc-danger foreIcon">
            <i class="fa fa-arrow-down widget-icon "></i>
            <span class="widget-caption">{{ title }}</span>

            <div class="widget-buttons">
                <a href="#" data-toggle="maximize"> <i class="fa fa-expand "></i></a>
                <a href="#" data-toggle="collapse" v-on:click="togglerBodyShow"><i class="fa fa-minus"></i></a>
                <a href="#" data-toggle="dispose" v-on:click="remove"><i class="fa  fa-times"></i></a>
            </div>
        </div>
        <transition
                name="custom-classes-transition"
                enter-active-class="animated tada"
                leave-active-class="animated bounceOutRight"
        >
            <div class="widget-body" if-show="collapsed" v-bind:transition="'expand'">

                <slot>

                </slot>
            </div>
        </transition>
    </div>

</script>

<div id="app">

    <input type="text" v-model="ptitle">

    <sc-widget v-bind:title="ptitle">
        <h1>我是body</h1>
    </sc-widget>

</div>

<script>
    // 注册
    Vue.component('sc-widget', {
        props: ['title'],
        template: '#scWidgetTpl',
        data: function () {
            return {
                show: true,
                collapsed: 'true'
            }
        },
        methods: {
            togglerBodyShow: function (event) {
                this.collapsed = !this.collapsed;
            },
            remove: function (event) {
                this.show = false;
            }
        }
    });
    // 创建根实例
    new Vue({
        el: '#app',
        data: {
            ptitle: '我是外层'
        }
    });
</script>


</body>
</html>